<template>
<DialogForm ref="dialogForm"
            v-model="dialogVisible"
            :cancel-button="true"
            :confirm-button="true"
            :confirm-loading="confirmLoading"
            @confirm="confirmHandler"
>
  <template #content>
    <el-tree ref="tree"
             draggable
             default-expand-all
             :check-strictly="true"
             :props="{label:'name', value:'name', id: 'name'}"
             :data="options"
             @check-change="checkChangeHandler"
             show-checkbox
             node-key="id"
             :allow-drag="()=>{return false}"
    />
  </template>
</DialogForm>
</template>

<script>
import DialogForm from '@/components/dialog/DialogForm'
import { ref } from 'vue'
import { deleteRolePermission, getPermissionByRoleId, getPermissionTree, insertRolePermission } from '@/api/permission'
import { StaticSet } from '@/utils/set'
export default {
  name: 'PermissionRoleForm',
  components: { DialogForm },
  setup () {
    return {
      dialogVisible: ref(false),
      confirmLoading: ref(false),
      options: ref([]),
      data: ref([]),
      keysOld: ref({}),
      roleId: ref('')
    }
  },
  methods: {
    getPermissionByRoleId (roleId) {
      // this.data = []
      this.roleId = roleId
      getPermissionByRoleId(roleId).then(val => {
        this.data = val.data
        const keys = val.data
        console.log(keys)
        this.$refs.tree.setCheckedKeys(keys)
        // for (const item of keys) {
        //   this.$refs.tree.setChecked(item, true, false)
        // }

        this.keysOld = new Set(val.data)
      })
    },
    deleteRolePermission (data) {
      deleteRolePermission(data).then((val) => {
        console.log(val)
      })
    },
    insertRolePermission (data) {
      insertRolePermission(data).then((val) => {
        console.log(val)
      })
    },
    checkTree (data, event) {
      console.log('data', data)
      console.log('event', event)
    },
    checkChangeHandler (data, isOption, event) {
      console.log('change', data)
      console.log('isOption', isOption)
      console.log('event', event)
    },
    confirmHandler () {
      this.confirmLoading = true
      const keys = new Set([...this.$refs.tree.getCheckedKeys()])
      const newKeys = new StaticSet(keys)
      const oldKeys = new StaticSet(this.keysOld)
      const differenceSet = new StaticSet(new Set([...oldKeys.difference(newKeys), ...newKeys.difference(oldKeys)]))
      if (differenceSet.size === 0) { // 相同，不变
        this.dialogVisible = this.confirmLoading = false
        return
      }
      // 取删掉的节点key
      const deleteKeys = [...differenceSet.difference(newKeys)]
      // 取新增的节点key
      const addKeys = [...differenceSet.difference(oldKeys)]
      deleteRolePermission({ roleId: this.roleId, permissionIdJson: JSON.stringify(deleteKeys) }).then(val => {
        insertRolePermission({ roleId: this.roleId, permissionIdJson: JSON.stringify(addKeys) }).then(val => {
          this.dialogVisible = this.confirmLoading = false
        })
      })
    },
    getPermissionTree () {
      getPermissionTree().then(val => {
        this.options = val.data
      })
    }
  },
  mounted () {
    this.getPermissionTree()
  }
}
</script>

<style scoped>

</style>
